<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.b {
			background: url(../img/55ffc7529f1920c62ce345cad7e2c6bd.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}
	</style>

	<body>

		<canvas id="myCanvas" width="1350" height="600"> </canvas>

		<script type="text/javascript">
			var numbers = [
				[
					//0
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0],
				],
				[
					//1
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1],
				],
				[
					//2
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1],
				],
				[
					//3
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//4
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1],
				],
				[
					//5
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//6
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//7
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
				],
				[
					//8
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//9
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
				],
				[
					//9
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
				], //冒号
			];
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			var text = [1, 1, 10, 4, 7, 10, 5, 2];
			var img = new Image();
			img.src="img/01.jpg"
			//打印当前时间
			var date = new Date();
			var balls = [];
			img.onload = function() {
				setInterval(function() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					ctx.drawImage(img, 0, 0);
					var time = new Date();
					//如果秒数改变
					if(time.getSeconds() != date.getSeconds()) {
						//添加小球
						//判断秒数个位还是十位变化
						var gw = date.getSeconds() % 10;
						addBall(940, 10, gw);
						var sw1 = parseInt(date.getSeconds() / 10);
						var sw2 = parseInt(time.getSeconds() / 10);
						if(sw1 != sw2) {
							addBall(780, 10, sw1);
						}
						date = time;
					}
					var r = 10;
					//打印改变后的时间
					text[0] = parseInt(date.getHours() / 10);
					text[1] = date.getHours() % 10;
					text[3] = parseInt(date.getMinutes() / 10);
					text[4] = date.getMinutes() % 10;
					text[6] = parseInt(date.getSeconds() / 10);
					text[7] = date.getSeconds() % 10;
					for(var i = 0; i < text.length; i++) {
						if(i == 2) {
							drawNumber(i * 160 - r, r, text[i]);
						} else if(i == 3 || i == 4) {
							drawNumber(i * 160 - 90, r, text[i]);
						} else if(i == 5) {
							drawNumber(i * 160 - 110, r, text[i]);
						} else if(i == 6 || i == 7) {
							drawNumber(i * 160 - 190, r, text[i]);
						} else {
							drawNumber(i * 150 + r, r, text[i]);
						}
					}
					//打印小球
					drawBalls();
				}, 33);
			}

			function addBall(ball1X, ball1Y, number) {
				for(var i = 0; i < numbers[number].length; i++) {
					var t1 = i * 20;
					for(var k = 0; k < numbers[number][i].length; k++) {
						var l1 = k * 20;
						if(numbers[number][i][k] == 1) {
							//添加小球
							var vx = (Math.random() * 5) + 5;
							if(Math.random() > 0.5) {
								vx = -vx;
							}

							var vy = (Math.random() * 10) + 5;
							if(Math.random() > 0.5) {
								vy = -vy;
							}
							var s = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var a = Math.random();
							var color = "rgba(" + s + "," + g + "," + b + "," + a + ")"
								//x,y,r,vx,vy,color
							balls.push([ball1X + l1, ball1Y + t1, 10, vx, vy, color]);
						}
					}
				}

			}

			function drawBalls() {
				for(var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = balls[i][5];
					ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
					ctx.fill();
					balls[i][0] = balls[i][0] + balls[i][3];
					balls[i][1] = balls[i][1] + balls[i][4];
					balls[i][4] = balls[i][4] + 3;
					if(balls[i][1] > canvas.height - balls[i][2]) {

						balls[i][4] = -balls[i][4] * 0.5;
						balls[i][1] = canvas.height - balls[i][2];
					}
				}

			}

			function drawNumber(arcX, arcY, num) {
				var number1 = numbers[num];
				var r = 8;
				//n代表第几个数组，i代表数组的第几行，j代表数组的第几列
				//							for(var n = 0; n < balls.length; n++) {				
				for(var i = 0; i < number1.length; i++) {
					var ry = arcY + 2 * r * i;
					for(var j = 0; j < number1[i].length; j++) {
						if(number1[i][j] == 1) {

							ctx.fillStyle = "#8FC5CE";

							ctx.beginPath();
							var rx = arcX + 2 * r * j;
							ctx.arc(rx, ry, r, 0, 2 * Math.PI);

							ctx.fill();
						}

					}
				}

			};
		</script>
	</body>

</html>